.w2field {
    padding: 3px;
    border-radius: 3px;
    border: 1px solid silver;
}

.w2ui-field-helper {
    position: absolute;
    display: inline-block;
    line-height: 100%;
    pointer-events: none;
    .user-select(none);

    .w2ui-field-up {
        position: absolute;
        top: 0px;
        padding: 2px 3px;
        cursor: pointer;
        pointer-events: all;
    }

    .w2ui-field-down {
        position: absolute;
        bottom: 0px;
        padding: 2px 3px;
        cursor: pointer;
        pointer-events: all;
    }

    .arrow-up:hover {
        border-bottom-color: #81C6FF;
    }

    .arrow-down:hover {
        border-top-color: #81C6FF;
    }

    .w2ui-icon-search {
        position: absolute;
        margin: 8px 0px 0px -2px;
        display: none;
        color: #777777;
        width: 21px !important;
        font-size: 13px;

        &.show-search {
            display: block;
        }
    }

    // enum list
    &.w2ui-list {
        color: @list-color;
        position: absolute;
        padding: 0px;
        margin: 0px;
        min-height: 28px;
        overflow: auto;
        border: @list-border;
        border-radius: 3px;
        font-size: 6px;    // need to be small for list
        line-height: 100%;
        box-sizing: border-box;
        pointer-events: all;
        background-color: #f7fafa;

        &.has-focus,
        &:focus-within {
            outline: auto @input-focus-outline-color;
            background-color: white;
        }

        input[type=text] {
            .box-shadow;
        }

        .w2ui-multi-items {
            position: absolute;
            display: inline-block;
            margin: 0px;
            padding: 0px;
            pointer-events: none;

            .li-item {
                pointer-events: all;
                float: left;
                margin: 3px 0px 0px 5px;
                border-radius: 15px;
                width: auto;
                padding: 3px 24px 1px 12px;
                border: @list-item-border;
                background-color: @list-item-background-color;
                white-space: nowrap;
                cursor: default;
                font-family: @list-item-font;
                font-size: @list-item-font-size;
                line-height: 100%;
                height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                box-sizing: border-box;

                &:hover {
                    background-color: darken(@list-item-background-color, 10%);
                }

                &:last-child {
                    border-radius: 0px;
                    border: 1px solid transparent;
                    background-color: transparent;
                    input {
                        padding: 1px;
                        padding-top: 0px;
                        margin: 0px;
                        border: 0px;
                        outline: none;
                        height: auto;
                        line-height: 100%;
                        font-size: inherit;
                        font-family: inherit;
                        background-color: transparent;
                    }
                }

                .w2ui-icon {
                    float: left;
                    color: #828aa7;
                    margin: 1px 2px 0 -6px;
                }

                .w2ui-list-remove {
                    float: right;
                    width: 16px;
                    height: 16px;
                    margin: -2px -20px 0px 0px;
                    border-radius: 2px;
                    font-size: 12px;
                    border: 1px solid transparent;
                    &:hover {
                        background-color: #f6e5e5;
                        border: 1px solid #fac2c2;
                        color: red;
                        opacity: 1;
                    }
                    &:before {
                        position: relative;
                        display: inline-block;
                        left: 4px;
                        opacity: 0.7;
                        content: 'x';
                        line-height: 1;
                    }
                }

                > span.file-size {
                    pointer-events: none;
                    color: #777;
                }
            }
            .li-search {
                float: left;
                margin: 0;
                padding: 0;
                input[type=text] {
                    pointer-events: all;
                    width: 0;
                    height: 20px;
                    padding: 3px 0 3px 0;
                    margin: 3px 0 0 5px;
                    border: 0;
                    background-color: transparent;
                    &:focus {
                        outline: none;
                        border: 0;
                    }
                }
            }
        }

        .w2ui-multi-file {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
        }

        &.w2ui-readonly .w2ui-multi-items > .li-item:hover {
            background-color: @list-item-background-color;
        }

        &.w2ui-file-dragover {
            background-color: #E4FFDA;
            border: 1px solid #93E07D;
        }

        // This a DROP ZONE, will be remove when first file dropped
        .w2ui-enum-placeholder {
            display: inline;
            position: absolute;
            pointer-events: none;
            color: #999;
            box-sizing: border-box;
        }
    }
}

// tooltip for file items
.w2ui-overlay {
    .w2ui-file-preview {
        padding: 1px;
        background-color: white;
    }

    .w2ui-file-info {
        display: grid;
        grid-template-columns: 1fr 2fr;
        color: white;
        padding: 6px 0;

        .file-caption {
            text-align: right;
            color: silver;
            padding-right: 10px;
        }

        .file-value {
            color: white;
        }

        .file-type {
            max-width: 200px;
            display: block-inline;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.arrow-up {
    background: none;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;  /* left arrow slant */
    border-right: 4px solid transparent; /* right arrow slant */
    border-bottom: 5px solid #777; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

.arrow-down {
    background: none;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #777;
    font-size: 0;
    line-height: 0;
}

.arrow-left {
    background: none;
    width: 0;
    height: 0;
    border-bottom: 4px solid transparent;  /* left arrow slant */
    border-top: 4px solid transparent; /* right arrow slant */
    border-right: 5px solid #777; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

.arrow-right {
    background: none;
    width: 0;
    height: 0;
    border-bottom: 4px solid transparent;  /* left arrow slant */
    border-top: 4px solid transparent; /* right arrow slant */
    border-left: 5px solid #777; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

.w2ui-select {
    cursor: default;
    color: black !important;
	background-image: url('');
    background-size: 17px 6px;
    background-position: right center;
    background-repeat: no-repeat;
    &.has-focus {
        outline: auto @input-focus-outline-color;
        background-color: white !important;
    }

    &[readonly], &[disabled] {
        background-image: none;
        background-color: #f1f1f1 !important;
        color: #777 !important;
    }
}